@import "./variables";

// 闭合子元素的浮动
@mixin clearfix ($extend:true) {
  @if $extend {
    @extend %clearfix;
  } @else {
    *zoom: 1;
    &:before,
    &:after {
      content: "";
      display: table;
    }
    &:after {
      clear: both;
    }
  }
}
%clearfix{
  @include clearfix(false);
}


@function r($px, $isFixed:true) {
  @if $px != 0 {
    @return if($isFixed, $px / $ratio + 0.01, $px / $ratio) / $browser-default-font-size * 1rem;
  } 
  @else
  {
    @return 0;
  }
}

@mixin border($top:1, $right:1, $bottom:1, $left:1, $color:#ebebf0) {
  background-image:linear-gradient(180deg, $color, $color 50%, transparent 50%), 
                  linear-gradient(90deg, $color, $color 50%, transparent 50%), 
                  linear-gradient(0deg, $color, $color 50%, transparent 50%),
                  linear-gradient(90deg, $color, $color 50%, transparent 50%);
  background-size: 100% $top + px, $right + px 100%, 100% $bottom + px, $left + px 100%;
  background-repeat: no-repeat;
  background-position: top, right top, bottom, left top ;
}

@mixin borderTop($top:1, $color:#ebebf0) {
  @include border($top, 0, 0, 0, $color);
}
@mixin borderRight($right:1, $color:#ebebf0) {
  @include border(0, $right, 0, 0, $color);
}
@mixin borderBottom($bottom:1, $color:#ebebf0) {
  @include border(0, 0, $bottom, 0, $color);
}
@mixin borderLeft($left:1, $color:#ebebf0) {
  @include border(0, 0, 0, $left, $color);
}
@mixin borderColor($color:#ebebf0) {
  @include border(1, 1, 1, 1, $color);
}
@mixin borderRadius($width:1,$style:solid,$color:#ebebf0,$radius:2px) {
  position:relative;
    &:after{
       left:0px;
       top:0px;
       right:-100%;
       bottom:-100%;
       border-radius:$radius;
       border-width: $width + px;
       border-style: $style;
       border-color: $color;
       position:absolute;
       display:block;
       -webkit-transform:scale(0.5);
       -webkit-transform-origin:0% 0%;
       content:'';
    }
}

@mixin images($url:'images/check.png',$repeat:no-repeat,$size:auto) {
    background-image:url($url);
    background-repeat:$repeat;
    -webkit-background-size:$size;
    background-size:$size;
}
@mixin flex() {
    display: box;
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
}
@mixin ellipsis{
  white-space: nowrap;text-overflow: ellipsis;overflow:hidden;
}
@mixin box($pack: center, $align: center) {
    @include flex;
    box-pack: $pack;
    box-align: $align;
    -webkit-box-pack: $pack;
    -webkit-box-align: $align;
}
@mixin flex-y{
  -webkit-align-self: center;
  align-self: center;
}
